<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <style rel="stylesheet">
        body {
            text-align: justify;
            color: #efd;
            background: #082838;
        }
        p {
            position: absolute;
            top: 20%;
            left: 50%;
            width: 420px;
            margin: 0;
            font: 18px "PT Serif", serif;
            -webkit-transform-origin: 0 0;
            -ms-transform-origin: 0 0;
            transform-origin: 0 0;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
        p::first-letter {
            float: left;
            margin-right: 9px;
            line-height: 1em;
            font-size: 260%;
        }
        p::after {
            content: "";
            display: inline-block;
            width: 100%;
        }
    </style>


</head>
<body>
    <p>The Caterpillar and Alice looked at each other for some time in silence: at last the Caterpillar took the hookah out of its mouth,
        and addressed her in a languid, sleepy voice.
        'Who are you?' said the Caterpillar.
        我们是共产主
    </p>
</body>
</html>

<script>
    (function() {
        var angle = 0;
        var p = document.querySelector('p');
        var text = p.textContent.split('');
        var len = text.length;
        var phaseJump = 360 / len;
        var spans;

        p.innerHTML = text.map(function(char) {
            return '<span>' + char + '</span>';
        }).join('');

        spans = p.children;
        console.log(spans[0], spans[len - 1]);
        (function wheee() {
            for (var i = 0; i < len; i++) {
                console.log(angle + Math.floor(i * phaseJump));
                spans[i].style.color = 'hsl(' + (angle + Math.floor(i * phaseJump)) + ', 55%, 70%)';
            }
            angle++;
            requestAnimationFrame(wheee);
        })();
    })();
</script>